<template>
    <div class="garments" :class="{animation}">
        <div class="garments-content">
            <figure class="garments-content-start">
                <img src="https://img.podpartner.com/static/images-202305/home-garments-start1.jpg" alt="">
                <img src="https://img.podpartner.com/static/images-202305/home-garments-start2.jpg" alt="">
                <img src="https://img.podpartner.com/static/images-202305/home-garments-start3.jpg" alt="">
            </figure>
            <figure class="garments-content-end">
                <img src="https://img.podpartner.com/static/images-202305/home-garments-str.png" alt="">
            </figure>
        </div>
    </div>
</template>
<script>
export default {
    name: "HomeGarments",
    props: {
        scroll: { type: Number, default: 0 }, screenHeight: { type: Number, default: 0 }
    },
    data () {
        return {
            animation: false,
            dom: null,
            offsetTop: 0
        }
    },
    watch: {
        scroll (v) {
            if (v) {
                let half = this.screenHeight / 2
                if (v > this.offsetTop - half) {
                    this.animation = true
                }
            } else {
                this.animation = false
            }
        }
    },
    methods: {
        getDoms () {
            this.dom = document.querySelector('.garments')
            this.offsetTop = this.dom.offsetTop
        }
    },
    mounted () {
        this.$on('global:homeResize', this.getDoms);
        this.getDoms();
    }
}
</script>
<style scoped lang="scss">
.garments {
    --garments-img-opacity: 1;
    width: 100%;
    height: var(--home-screen-height);
    min-height: 820px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s;
    .garments-content {
        position: absolute;
        width: 1280px;
        height: 680px;
        background: #f2f1f2;
        border-radius: 28px;
        overflow: hidden;
        figure {
            position: absolute;
            inset: 0;
            background-color: #fafafa;
            img {
                position: absolute;
            }
        }
        .garments-content-end {
            opacity: 0;
            width: 100%;
            height: 100%;
            background: rgba($color: #000000, $alpha: 0.3);
            z-index: 1;
            img {
                width: 220px;
                height: auto;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .garments-content-start {
            img {
                width: 420px;
                height: auto;
                &:nth-child(1) {
                    top: 0;
                    left: 0;
                    transform: translateY(-100%);
                }
                &:nth-child(2) {
                    bottom: 0;
                    left: calc(50% - 210px);
                    transform: translateY(100%);
                }
                &:nth-child(3) {
                    top: 0;
                    right: 0;
                    transform: translateY(-100%);
                }
            }
        }
    }
    &.animation {
        @keyframes garments-start1 {
            0% {
                transform: translateY(-100%);
            }
            100% {
                transform: translateY(0);
            }
        }
        @keyframes garments-start2 {
            0% {
                transform: translateY(100%);
            }
            100% {
                transform: translateY(0);
            }
        }
        @keyframes garments-end {
            0% {
                width: 220px;
            }
            100% {
                width: 520px;
            }
        }
        .garments-content {
            .garments-content-end {
                animation: show-item ease-in-out 0.5s 1.5s forwards;
                & > img {
                    animation: garments-end ease-in-out 0.5s 1.5s forwards;
                }
            }
        }
        .garments-content-start {
            img {
                &:nth-child(1),
                &:nth-child(3) {
                    animation: garments-start1 ease-in-out 1.5s forwards;
                }
                &:nth-child(2) {
                    animation: garments-start2 ease-in-out 1.5s forwards;
                }
            }
        }
    }
}
@media screen and (max-width: 960px) {
    .garments {
        padding: 0 14px;
        height: auto;
        & * {
            animation: none !important;
        }
        .garments-content {
            max-width: 500px;
            position: static;
            top: 0%;
            left: 0%;
            transform: translate(0%, 0%);
            height: auto;
            .garments-content-start {
                opacity: 1;
                position: static;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                img {
                    display: none;
                    width: 100%;
                    position: static;
                    &:nth-child(2) {
                        display: block;
                        transform: none;
                    }
                }
            }
            .garments-content-end {
                opacity: 1;
                border-radius: 28px;
                img {
                    width: 80%;
                    height: auto;
                    -webkit-animation: none;
                    animation: none;
                    min-height: 100px;
                }
            }
        }
    }
}
</style>